<template>
	<Popup
		class="login-role"
		title="请选择身份"
		btnText="下一步"
		@clickBtn="onclickNext"
		@close="$emit('close')"
	>
		<div class="roles">
			<div
				class="center"
				v-for="role in roles"
				:key="role.value"
				@click="selectRole=role.value"
			>
				<Button
					class="role"
					:class="selectRole === role.value ? 'active' : ''"
					bgColor="#EFF3F3"
					width="220"
					height="200"
				>
					<img	:src="role.img">
				</Button>
				<p style="margin-top: 20px;">{{role.label}}</p>
			</div>
		</div>
	</Popup>
</template>

<script>
export default {
  data() {
    return {
      roles: [
        { label: '孩子', value: 'child', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/baground/20220308140130751-Saly-10副本 3.png' },
        { label: '家长', value: 'parent', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/img-parent.png' },
      ],
      selectRole: ''
    }
  },
  methods: {
    onclickNext() {
      if (this.selectRole) {
        this.$emit('nextStep', { role: this.selectRole })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.login-role {
  .roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
    padding: 0 34px;
    margin-top: 62px;

    .role {
      border: 3px solid transparent;
    }

    .active {
      filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
      border-color: $primary2;
    }

    p {
      color: #003e34;
    }
  }
}
</style>
